import { usersDetails } from '@/services/Detail';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useLocation } from '@umijs/max';
import { Space, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import PopupRight from './components/popupRight';

export default () => {
  const actionRef = useRef<any>();
  const [open, setOpen] = useState(false);
  const [clickAct, setClickAct] = useState<any>('');
  const location = useLocation();
  useEffect(() => {
    if (location.pathname === '/freezeDetail') {
      actionRef.current.reload();
      console.log(11111111);
    }
    // 当URL发生变化时，重新加载数据
  }, [location]);
  let onclose = (type: boolean) => {
    setOpen(!open);
    setClickAct({});
    if (type) {
      actionRef.current?.reload();
    }
  };
  // 打开详情
  const changeDetail = (itemDetail: any) => {
    setClickAct(itemDetail);
    setOpen(!open);
  };
  const columns: ProColumns<any>[] = [
    {
      title: '商户编号',
      dataIndex: 'id',
      hideInTable: true,
      order: 2,
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      valueType: 'dateRange',
      width: 160,
      order: 1,
      search: {
        transform: (value) => {
          return {
            minRegisterTime: value[0] + ' 00:00:00',
            maxRegisterTime: value[1] + ' 23:59:59',
          };
        },
      },
      render: (_, record) => {
        return <div>{record.registerTime}</div>;
      },
    },

    {
      title: '商户基本信息',
      dataIndex: 'name',
      search: false,
      width: 270,
      render: (_, record) => {
        return (
          <>
            <div>
              姓名：<span>{record.name}</span>
            </div>
            <div>
              商户编号：<span>{record.id}</span>
            </div>
          </>
        );
      },
    },
    {
      title: '行业分类',
      dataIndex: 'industryCategoryName',
      search: false,
      width: 120,
    },
    {
      title: '有密签约',
      dataIndex: 'payTransSignCount',
      search: false,
      width: 120,
    },
    {
      title: '安全发签约',
      dataIndex: 'safePaySignCount',
      search: false,
      width: 120,
    },
    {
      title: '到支付宝费率',
      dataIndex: 'serviceUnitPrice',
      search: false,
      width: 120,

      render: (_, record) => {
        switch (record.mode) {
          case 'fixed_ratio':
            return <>{(record.serviceRatio * 100).toFixed(2)}%</>;
          case 'fixed_amount':
            return <>{record.serviceUnitPrice / 100}</>;
        }
      },
    },
    {
      title: '到银行卡费率',
      dataIndex: 'merchantTradeNo',
      search: false,
      width: 120,
      render: (_, record) => {
        if (record.openSafePayBank) {
          switch (record.mode) {
            case 'fixed_ratio':
              return <>{(record.bankServiceRatio * 100).toFixed(2)}%</>;
          }
        } else {
          return <>-</>;
        }
      },
    },
    {
      title: '合伙人分佣',
      dataIndex: 'partnerServiceRatio',
      width: 200,
      search: false,
      render: (_, record) => {
        switch (record.mode) {
          case 'fixed_ratio':
            if (record && record.commissionMode === 'cost_mode') {
              return (
                <>
                  <div>
                    到支付宝分佣费率：
                    <span>
                      {(record.partnerServiceRatio * 100).toFixed(2)}%
                    </span>
                  </div>
                  {record.openSafePayBank && (
                    <div>
                      到银行卡分佣费率：
                      <span>
                        {(record.partnerBankServiceRatio * 100).toFixed(2)}%
                      </span>
                    </div>
                  )}
                </>
              );
            } else {
              return <>{(record.benefitRatio / 100).toFixed(2)}</>;
            }
          case 'fixed_amount':
            return (
              <>
                ¥<span>{record.partnerBenefit / 100}</span>
              </>
            );
        }
      },
    },
    {
      title: '服务费账户余额',
      dataIndex: 'moneyLeft',
      width: 120,

      search: false,
      render: (_, record) => {
        return <>{record.moneyLeft / 100}</>;
      },
    },
    {
      title: '最近充值服务费时间',
      dataIndex: 'lastChargeTime',
      width: 200,
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'merchantTradeNo',
      width: 160,
      search: false,
      render: (_, record) => {
        return (
          <>
            {record.securityStatus === 0 ? (
              <Tag color="green">正常</Tag>
            ) : (
              <Tag color="red">已冻结</Tag>
            )}
            {record.securityRemark && (
              <div>
                {'('} {record.securityRemark} {')'}
              </div>
            )}
          </>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'createTime',
      search: false,
      key: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 100,
      render: (_, record) => {
        return (
          <Space>
            <a className="text-[#1890FF]" onClick={() => changeDetail(record)}>
              解除冻结
            </a>
          </Space>
        );
      },
    },
  ];

  // 查看的订单号
  return (
    <div style={{ padding: '20px' }}>
      <ProTable<any>
        actionRef={actionRef}
        columns={columns}
        request={async (params: any) => {
          let data = await usersDetails({
            pageNo: params.current - 1,
            pageSize: params.pageSize,
            mobile: null,
            securityStatus: -1,
            id: params.id,
            maxRegisterTime: params.maxRegisterTime,
            minRegisterTime: params.minRegisterTime,
          });
          return {
            success: true,
            data: data,
          };
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        scroll={{ y: 1000, x: 500 }}
        dateFormatter="string"
      />
      <PopupRight open={open} onClose={onclose} detail={clickAct}></PopupRight>
    </div>
  );
};
